<!--
    * Time    : 2021-01-10 13:52:01
    * Author  : zhangTj
    * Desc    : 我的收益页面
-->

<template>
    <div class="w750">
        <div class="d-flex flex-column">
            <!-- 数据 -->
            <div class="text-fff px-3 py-2 bg-img">
                <div>
                    <span class="font-12 opacity-5">累计获得佣金（元）</span>
                    <h1 class="font-32 font-weight-400">{{ money(indexData.totalCommission)[0] }}.{{ money(indexData.totalCommission)[1] }}</h1>
                </div>
                <div class="mt-2 grid-column2">
                    <div class="d-flex flex-column">
                        <span class="font-12 opacity-5">预获得佣金（元）</span>
                        <span class="font-24 mt">
                            {{ money(indexData.totalForeseeCommission)[0] }}.{{ money(indexData.totalForeseeCommission)[1] }}
                        </span>
                    </div>
                    <div class="d-flex flex-column">
                        <span class="font-12 opacity-5">待结算佣金（元）</span>
                        <span class="font-24 mt">
                            {{ money(indexData.totalPendingSettleCommission)[0] }}.{{ money(indexData.totalPendingSettleCommission)[1] }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- 列表数据 -->
            <div class="flex-1 d-flex flex-column">
                <div class="position-sticky top-0">
                    <van-tabs
                        v-model="activeTab"
                        @change="changeTag"
                        line-height="4px"
                        color="#007FFF"
                        title-active-color="#333"
                        title-inactive-color="#999"
                    >
                        <van-tab v-for="tab in tabList" :key="tab.status" :title="tab.name" />
                    </van-tabs>
                    <div class="py-1 bg-f8 px-15p" @click="popupShow = true">
                        <span class="font-14">全部地区</span>
                        <span class="iconfont iconcaret-bottom text-999 ml" style="font-size: 12px"></span>
                    </div>
                </div>
                <div class="flex-1 font-14">
                    <van-list
                        v-if="paging.tab"
                        v-model="paging.loading"
                        :finished="paging.finished"
                        :immediate-check="false"
                        finished-text="没有更多了"
                        @load="loadMore"
                    >
                        <div class="mb-1 bg-fff px-15p" v-for="item in list" :key="item.id">
                            <div class="py-15p border-bottom border-c-f8 d-flex j-sb">
                                <span>订单编号：{{ item.bizOrderNo }}</span>
                                <span>{{ item.settleStatus | statusFormat }}</span>
                            </div>
                            <div class="py-15p">
                                <div>
                                    <span>昵称：</span>
                                    <span>{{ item.nickName }}</span>
                                </div>
                                <div class="mt">
                                    <span>付款金额：</span>
                                    <span>￥{{ money(item.orderAmount)[0] }}.{{ money(item.orderAmount)[1] }}</span>
                                </div>
                                <template v-if="item.refundAmount">
                                    <div class="mt">
                                        <span>售后退款：</span>
                                        <span style="color: #ff1e10">￥{{ money(item.refundAmount)[0] }}.{{ money(item.refundAmount)[1] }}</span>
                                    </div>
                                    <div class="mt d-flex j-sb">
                                        <div>
                                            <span>实际金额：</span>
                                            <span>￥{{ money(item.realAmount)[0] }}.{{ money(item.realAmount)[1] }}</span>
                                        </div>
                                        <div>
                                            <span>实际佣金：</span>
                                            <span>￥{{ money(item.commissionAmount)[0] }}.{{ money(item.commissionAmount)[1] }}</span>
                                        </div>
                                    </div>
                                </template>
                                <div class="mt" v-else>
                                    <span>订单佣金：</span>
                                    <span style="color: #f56c6c">￥{{ money(item.commissionAmount)[0] }}.{{ money(item.commissionAmount)[1] }}</span>
                                </div>
                            </div>
                        </div>
                    </van-list>
                    <EmptyServe v-if="paging.emptylist || paging.error" title="暂无下级服务商" />
                </div>
            </div>
        </div>

        <!-- 选择地区 -->
        <van-popup v-model="popupShow" position="bottom" :style="{ height: '50%' }">
            <van-picker show-toolbar :columns="columns" value-key="name" @confirm="confirmCity" @cancel="popupShow = false" />
        </van-popup>
    </div>
</template>

<script>
import EmptyServe from 'components/EmptyServe/EmptyServe'
import PageUtil from 'utils/PageUtil'
import cash from 'utils/tool'
import { providersCommissionDetail, providersGetDistrict,providersIndex } from 'api/facilitator'
const list = new PageUtil(providersCommissionDetail)

export default {
    name: '',
    components: { EmptyServe },
    data() {
        return {
            activeTab: 0,
            tabList: [
                {
                    status: '',
                    name: '全部'
                },
                {
                    status: 'OFF_SETTLE',
                    name: '未结算'
                },
                {
                    status: 'ON_SETTLE',
                    name: '已结算'
                }
            ],
            paging: {
                tab: true,
                loading: false,
                finished: false,
                error: false, // 是否错误
                emptylist: false // 是否显示列表为空时的样式
            },
            list: [],
            popupShow: false, // 选择城市弹出层
            columns: [
                {
                    id: 1,
                    name: '全部地区'
                },
                {
                    id: 2,
                    name: '天河区'
                }
            ],
            money: cash,
            params: {
                status: '', // 全部为空 OFF_SETTLE:未结算，ON_SETTLE:已结算
                districtId: '' // 区域ID
            },
            indexData: {} // 首页数据
        }
    },
    computed: {},
    watch: {},
    filters: {
        // 返回订单状态
        statusFormat(value) {
            const dict = {
                OFF_SETTLE: '未结算',
                ON_SETTLE: '已结算'
            }
            return dict[value] || ''
        }
    },
    created() {},
    destroyed() {},
    mounted() {
        this.getDetail()
        list.loadListByPage(this, this.params)
        this.getCity()
    },
    methods: {
                // 获取首页详情
        getDetail() {
            providersIndex()
                .then((res) => {
                    if (!res.success) {
                        this.$toast(res.msg)
                        return
                    }
                    this.indexData = res.result
                })
        },
        // 加载更多
        loadMore() {
            list.loadListByPageMore()
        },

        // 获取地区
        getCity() {
            providersGetDistrict().then((res) => {
                if (!res.success) {
                    this.$toast(res.msg)
                    return
                }
                const allCity = {
                    id: '',
                    name: '全部地区'
                }
                this.columns = res.result
                this.columns.unshift(allCity)
            })
        },

        // 选择地区
        confirmCity(cityItem) {
            this.popupShow = false
            this.$set(this.params, 'districtId', cityItem.id)
            list.loadListByPage(this, this.params)
        },

        // 切换tab
        changeTag(tagIndex) {
            this.$set(this.params, 'status', this.tabList[tagIndex].status)
            list.loadListByPage(this, this.params)
        }
    }
}
</script>

<style scoped>
.bg-img {
    background: #007fff url('~@/assets/images/profit-img.png') no-repeat bottom;
    background-size: 100%;
}
</style>
